.user {
	position: relative;
	width: 64px;
	height: 64px;

	.popover {
		position: absolute;
		left: 0;
		top: calc(100% + 10px);
		transform: translateX(calc(-50% + 16px));
		padding: 20px 30px;
		width: 200px;
		background-color: #fff;
		border-radius: 8px;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
		opacity: 0;
		transition: opacity 1.35s;
		z-index: -99;
	}

	.avatar {
		cursor: pointer;
		position: absolute;
		right: 16px;
		top: 16px;
		z-index: 9;
		transition:
			width 0.35s,
			height 0.35s;
		background-color: #000;
	}

	&:hover {
		.avatar {
			width: 64px;
			height: 64px;
		}

		.popover {
			z-index: 8;
			opacity: 1;
		}

		:global(.anticon-user) {
			font-size: 64px;
		}
	}
}

.loginDialog {
	:global(.ant-modal-content) {
		padding: unset;
		background-color: #201c1c;
	}
}
